<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<%@include file="/common/javascript.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>课程浏览</title>
	<link href="${ctx}/static/jquery-week-calendar/css/smoothness/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/jquery-week-calendar/jquery.weekcalendar.css" rel="stylesheet" type="text/css"/>
    <script type='text/javascript' src='${ctx}/static/jquery-week-calendar/jquery-ui-1.8.11.custom.min.js'></script>
  	<script type='text/javascript' src='${ctx}/static/jquery-week-calendar/date.js'></script>
  	<script type='text/javascript' src='${ctx}/static/jquery-week-calendar/jquery.weekcalendar.js'></script>
	<style>
		#btn { text-align: center; }
	</style>
	
	<script type='text/javascript'>
	    var $calendar;
	    var dialog; 
	 
	 	var eventData = { 
	 		events : <c:out value="${eventDataJson}" escapeXml="false" />
	  	};
	 	
	 	var date = new Date();
		date.setHours(8);
	  	$(document).ready(function() {
			$calendar = $('#calendar').weekCalendar({
				date: date,
 				businessHours: {start: 8, end: 21, limitDisplay: true},
	      		timeslotsPerHour: 4,
	      		scrollToHourMillis : 0, 
	            textSize: 10,
	            firstDayOfWeek : 1,
				showHeader: false,
	            readonly: true,
				buttons: false,
				dateFormat: "Y年n月j日",
				timeFormat: "a h:i",
				timeSeparator: " - ",
	      		height: function($calendar){   
	        		return $(window).height() - $('p').outerHeight(true) - 48;
	      		},
	      		eventRender : function(calEvent, $event) {
	        		if(calEvent.end.getTime() < new Date().getTime()) {
	          			$event.css('backgroundColor', '#aaa');
	          			$event.find('.time').css({'backgroundColor': '#999', 'border':'1px solid #888'});
	        		}
	   			}, 
	      		eventClick : function(calEvent, $event) {  
	      			if (typeof(calEvent.id) != 'undefined') { 
	      				var parent=window.parent;
	      				dialog = parent.$.ligerDialog.open({url: '${ctx}/qso/btable/list/view/view?id='+calEvent.id, height:300, width:600, isHidden: false, showMax: false, showToggle: false, showMin: false, isResize: true, modal: true, title:"详细",onBeforeClose:
	      	    			function() {
	        				dialog.close(); 
	        				},
	      					buttons:[{text:"取消",onclick:function(item,d){
								dialog.close();
							}}]});
	      			}      			
	      		}, 
	      		data: eventData
			});
			
			$('.prev').bind('click', function() {   
				if (parseInt($('#current').text()) > 1) { 
					$('#calendar').weekCalendar('prevWeek');
					$('#current').text( parseInt( $('#current').text() ) - 1 );
				}
			});
			
			$('.next').bind('click', function() { 
				if (parseInt($('#current').text()) < parseInt('${totalWeeks}')) { 
					$('#calendar').weekCalendar('nextWeek'); 
					$('#current').text( parseInt( $('#current').text() ) + 1 );
				}
			});
	  });
	  	
	  function closeDialog()
	  {
		  alert('a');
		  //dialog.close();
	  }
  </script>
</head>
<body>
  <div style=" width:100%" id="mainsearch">
   <div class="searchbox" style="padding:10px 10px 10px 10px;">
	<p>教师姓名：${teacherName}老师</p>
   </div>
  </div>
  	<div id="calendar" style="width:99%;" ></div>
  	<p id="btn">
  		<button class="prev">&nbsp;&lt;&nbsp;</button>
  		第 <span id="current">${currentWeek}</span> 周 / 共 <span id="total">${totalWeeks}</span> 周 
  		<button class="next">&nbsp;&gt;&nbsp;</button>
  	</p>
</body>   
 
</html>